<template>
  <van-row>
    <van-nav-bar
      :title="title"
      left-arrow
      left-text="返回"
      right-text="取消"
      @click-left="$emit('close')"
      @click-right="$emit('close')"
    />
    <van-form ref="submitForm" @submit="onSubmit">
      <van-field
        readonly
        clickable
        name="customerName"
        :value="submitForm.customerName"
        label="客户名称"
        placeholder="点击选择客户"
        input-align="left"
        :rules="[{ required: true, message: '请选择客户' }]"
        @click="showCustomer=true"
      />
      <van-field
        readonly
        clickable
        name="moldName"
        :value="submitForm.moldName"
        label="模具"
        placeholder="点击选择模具"
        input-align="left"
        :rules="[{ required: true, message: '请选择模具' }]"
        @click="showMold=true"
      />
      <van-field
        v-model="submitForm.color"
        input-align="left"
        name="color"
        label="颜色"
        placeholder="请输入颜色"
        :rules="[{ required: true, message: '请填写颜色'}]"
      />
      <van-field
        v-model="submitForm.material"
        input-align="left"
        name="material"
        label="材质"
        placeholder="请输入材质"
        :rules="[{ required: true, message: '请填写材质'}]"
      />
      <van-field
        v-model="submitForm.size"
        input-align="left"
        name="size"
        label="尺码"
        placeholder="请输入尺码"
        :rules="[{ required: true, message: '请填写尺码'}]"
      />
      <van-field
        v-model="submitForm.length"
        input-align="left"
        name="length"
        label="长度"
        placeholder="请输入长度"
        :rules="[{ required: true, message: '请填写长度'}]"
      />
      <van-field
        v-model="submitForm.amount"
        readonly
        input-align="left"
        name="amount"
        label="总价"
        type="number"
        placeholder="请输入总价"
        :rules="[{ required: true, message: '请填写总价'}]"
      />
      <van-field
        v-model="submitForm.unitPrice"
        input-align="left"
        name="unitPrice"
        label="单价"
        type="number"
        placeholder="请输入单价"
        :rules="[{ required: true, message: '请填写单价'}]"
        @input="amountChange"
      />
      <van-field
        v-model="submitForm.quantity"
        input-align="left"
        name="quantity"
        label="数量"
        type="digit"
        placeholder="请输入数量"
        :rules="[{ required: true, message: '请填写数量'}]"
        @input="amountChange"
      />
      <van-field name="radio" label="类型" input-align="left" :rules="[{ required: true, message: '请选择优先级'}]">
        <template #input>
          <van-radio-group v-model="submitForm.priority" direction="horizontal">
            <van-radio name="0">普通</van-radio>
            <van-radio name="1">加急</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="submitForm.remark"
        rows="2"
        autosize
        input-align="left"
        label="备注"
        type="textarea"
        maxlength="100"
        show-word-limit
        placeholder="请输入订单备注"
      />
      <div style="margin: 16px;">
        <van-button round block type="danger" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <div v-if="showCustomer">
      <select-customer ref="selectCustomer" :visible="showCustomer" @close="handleCloseCustomer" />
    </div>
    <div v-if="showMold">
      <select-mold ref="selectMold" :visible="showMold" @close="handleCloseMold" />
    </div>
    <div v-if="showAttribute">
      <select-attribute ref="selectAttribute" :visible="showAttribute" @close="handleCloseAttribute" />
    </div>
  </van-row>
</template>

<style scoped>

</style>
<script>
import SelectCustomer from '@/components/modules/selectCustomer.vue'
import SelectMold from '@/components/modules/selectMold.vue'
import selectAttribute from '@/components/modules/selectAttribute.vue'
import { saveSaleOrder, selectSaleOrderById, updateSaleOrderById } from '@/api/saleOrder'
import { Toast } from 'vant'
import Moment from 'moment'

export default {
  name: 'OrderSubmitModule',
  components: { SelectCustomer, SelectMold, selectAttribute },
  data() {
    return {
      title: '录入订单',
      showCustomer: false,
      showMold: false,
      showAttribute: false,
      moldInfo: {},
      submitForm: {}
    }
  },
  methods: {
    init(id) {
      this.resetForm()
      this.title = '修改订单'
      if (!id) {
        this.title = '录入订单'
        return
      }
      selectSaleOrderById(id).then(resp => {
        if (resp.success) {
          this.submitForm = resp.data
          this.submitForm.moldId = resp.data.productInfo.moldId
          this.submitForm.moldName = resp.data.productInfo.moldName
          this.submitForm.color = resp.data.productInfo.color
          this.submitForm.material = resp.data.productInfo.material
          this.submitForm.size = resp.data.productInfo.size
          this.submitForm.length = resp.data.productInfo.length
        }
      })
    },
    resetForm() {
      this.moldInfo = {}
      this.submitForm = {
        id: '',
        customerName: '',
        moldName: '',
        color: '',
        material: '',
        size: '',
        length: '',
        amount: '',
        unitPrice: '',
        quantity: '',
        priority: '',
        remark: '',
        orderDate: '',
        customerId: '',
        itemList: []
      }
    },
    handleCloseCustomer(row) {
      this.showCustomer = false
      if (row) {
        this.submitForm.customerId = row.id
        this.submitForm.customerName = row.customerName
      }
    },
    handleCloseMold(row) {
      this.showMold = false
      if (row) {
        this.moldInfo = row
        this.submitForm.moldId = row.id
        this.submitForm.moldName = row.moldName
        this.showAttribute = true
        this.$nextTick(() => {
          this.$refs.selectAttribute.init(row)
        })
      }
    },
    handleCloseAttribute(row) {
      this.showAttribute = false
      if (row) {
        this.submitForm.quantity = row.quantity
        this.submitForm.unitPrice = row.unitPrice
        this.submitForm.amount = row.amount
        this.submitForm.orderDate = Moment(new Date()).format('YYYY-MM-DD')
        this.submitForm.color = row.color
        this.submitForm.material = row.material
        this.submitForm.size = row.size
        this.submitForm.length = row.length
      }
    },
    amountChange() {
      var quantity = this.submitForm.quantity
      var unitPrice = this.submitForm.unitPrice
      if (quantity && unitPrice) {
        this.submitForm.amount = Number(quantity) * Number(unitPrice)
      }
    },
    onSubmit() {
      let data = {
        priority: this.submitForm.priority,
        orderDate: this.submitForm.orderDate,
        customerId: this.submitForm.customerId,
        itemList: [this.submitForm]
      }
      let request = saveSaleOrder
      if (this.submitForm.id) {
        request = updateSaleOrderById
        data = this.submitForm
      }
      request(data).then(resp => {
        if (resp.success) {
          Toast.success('操作成功')
          this.submitForm = {}
          this.$emit('close')
        }
      })
    }
  }
}
</script>
